<template>
  <div class="time-slider glass-panel">
    <div class="time-period">
      <div class="time-range">2021-10-05 08 - 2021-10-06 08</div>
      <div class="period-buttons">
        <el-button-group>
          <el-button 
            size="small" 
            :class="{ active: activePeriod === '24' }"
            @click="handlePeriodChange('24')"
          >24小时</el-button>
          <el-button 
            size="small" 
            :class="{ active: activePeriod === '48' }"
            @click="handlePeriodChange('48')"
          >48小时</el-button>
          <el-button 
            size="small" 
            :class="{ active: activePeriod === '72' }"
            @click="handlePeriodChange('72')"
          >72小时</el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activePeriod = ref('24')

const handlePeriodChange = (period: string) => {
  activePeriod.value = period
  console.log('Period changed:', period)
}
</script>

<style lang="scss" scoped>
.time-slider {
  padding: 12px 24px;
  background: rgba(13, 19, 35, 0.8);
  border-radius: 10px;
  width: calc(100% - 48px);
  // width: calc(100% - 20px);
  pointer-events: auto;

  .time-period {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    .time-range {
      color: #fff;
      font-size: 14px;
      white-space: nowrap;
      background: rgba(0, 0, 0, 0.2);
      padding: 4px 12px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .period-buttons {
      flex-shrink: 0;
      :deep(.el-button-group) {
        .el-button {
          background: rgba(63, 158, 255, 0.1);
          border: 1px solid rgba(63, 158, 255, 0.2);
          color: rgba(255, 255, 255, 0.8);
          padding: 4px 12px;
          
          &:hover, &.active {
            background: rgba(63, 158, 255, 0.2);
            border-color: rgba(63, 158, 255, 0.3);
            color: #fff;
          }

          &.active {
            background: rgba(63, 158, 255, 0.3);
          }
        }
      }
    }
  }
}
</style> 